new Vue({
  el: '#main',
  data: {
    unfold: false,
    minDate: '2021-09-01', // 静态数据
    maxDate: '2024-04-01', // 静态数据
    selectedDate: '',
    aryField: ['操作用户', '操作对象'], // 字段名是固定数据
    selectedFieldValue: '0', // 给定值作为默认项
    selectedFieldName: '',
    queryValue: '',
    fuzzy: false,
    logs: [
      {
        checked: false,
        logId: 1,
        operatingUser: '张三',
        operatedUser: '学生1',
        description: '因病暂时休学',
        operatingTime: '2021-09-01',
      },
      {
        checked: false,
        logId: 2,
        operatingUser: '李四',
        operatedUser: '学生2',
        description: '2021年休学，现重新报到学习',
        operatingTime: '2023-08-21',
      },
      {
        checked: false,
        logId: 3,
        operatingUser: '李四',
        operatedUser: '学生3',
        description: '开除',
        operatingTime: '2024-04-01',
      },
    ],
  },
  methods: {
    toggle() {
      this.unfold = !this.unfold
    },
  },
  watch: {
    selectedFieldValue: {
      handler(newData) {
        this.selectedFieldName = this.aryField[newData]
      },
      immediate: true,
    },
  },
  computed: {
    unfoldOrfold() {
      return this.unfold ? '收起' : '展开'
    },
    isAll: {
      get() {
        return this.logs.every((item) => item.checked)
      },
      set(value) {
        this.logs.forEach((item) => (item.checked = value))
      },
    },
  },
})
